<template>
  <div class="home">
    <el-container>
      <el-header
        style="
          left: 0px;
          top: 0px;
          width: 100%;
          right: 0;
          z-index: 5;
          margin-top: 0;
        "
      >
        <el-form
          ref="form"
          :model="form"
          :inline="true"
          :rules="rules"
          label-position="right"
          label-width="120px"
        >
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-tickets"
              @click="confirmData(0)"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(1)"
              >提交</el-button
            >
          </el-form-item>

          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-tickets"
              @click="confirmData(0)"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(3)"
              >退回上一步</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(2)"
              >审核</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>

      <el-main style="margin: 3px 10px 10px 10px">
        <span
          style="
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            width: 100%;
            padding: 3px 0 5px 0;
          "
        >
          <span>推荐人确认表</span>
          <span style="margin-left: 10px">
            <svg-icon v-if="this.form.Status == 0" icon-class="Editing" />
            <svg-icon v-if="this.form.Status == 1" icon-class="ingAudit" />
            <svg-icon v-if="this.form.Status == 2" icon-class="Finish" />
          </span>
        </span>

        <span class="blueColor"> 推荐人信息 </span>

        <el-form
          ref="form"
          :model="form"
          inline="true"
          :rules="rules"
          label-position="left"
          label-width="100px"
        >
          <table style="width: 98%; margin: 3px 10px 10px 10px">
            <tr style="height:20px">
              <td>
                <el-form-item prop="UserName" label="姓名" style="height:25px">
                  <el-input
                    :disabled="true"
                    size="small"
                    v-model="form.UserName"
                  >
                    <el-button
                      slot="append"
                      size="small"
                      icon="el-icon-search"
                      @click="open(1)"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="UserCode" label="工号" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="true"
                    size="small"
                    v-model="form.UserCode"
                  ></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="JobName" label="职位" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="true"
                    size="small"
                    v-model="form.JobName"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td>
                <!-- <el-form-item prop="Organizename" label="制造群" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="true"
                    size="small"
                  ></el-input>
                </el-form-item> -->
                <el-form-item prop="PaymentDate" label="联系电话" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.Tell"
                  ></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="Organizename" label="单位" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="true"
                    size="small"
                    v-model="form.Organizename"
                  ></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="Relationship" label="与被推荐人关系" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.Relationship"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td colspan="1">
                <el-form-item prop="PaymentDate" label="家庭地址" style="height:25px">
                  <el-input
                    type="“text”"
                    :disabled="true"
                    size="small"
                    v-model="form.Address"
                  ></el-input>
                </el-form-item>
              </td>
              <!-- <td>
                
              </td> -->
              <td>
                <el-form-item label="推荐次数：" style="height:25px">
                  <el-input-number
                    v-model="form.Num"
                    :disabled="true"
                    size="small"
                    placeholder=" 推荐次数："
                  />
                </el-form-item>
              </td>
            </tr>

            <span class="blueColor"> 被推荐人信息 </span>
            <tr>
              <td>
                <el-form-item label="类型" prop="RecommendType" style="height:25px">
                  <el-radio-group v-model="form.RecommendType">
                    <el-radio
                      :label="item.IDXNO"
                      name="RecommendType"
                      v-for="item in selectlist"
                      v-if="item.IDXUP == '03'"
                      size="small"
                      :disabled="StepSN == 0 ? false : true"
                    >
                      {{ item.NAME }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td>
                <el-form-item
                  prop="RecommendUserName"
                  label="姓名"
                  class="innerForm" style="height:25px"
                >
                  <el-input
                    v-model="form.RecommendUserName"
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                  >
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                      @click="open(2)"
                      :disabled="StepSN == 0 ? false : true"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item
                  label="性别"
                  prop="RecommendSex"
                  class="innerForm" style="height:25px"
                >
                  <el-radio-group v-model="form.RecommendSex" size="small">
                    <el-radio
                      :label="item.IDXNO"
                      name="RecommendSex"
                      :disabled="StepSN == 0 ? false : true"
                      v-for="item in selectlist"
                      v-if="item.IDXUP == '04'"
                    >
                      {{ item.NAME }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </td>
              <td>
                <el-form-item
                  prop="RecommendNunit"
                  label="应聘单位"
                  class="innerForm" style="height:25px"
                >
                  <el-select
                    :disabled="StepSN == 0 ? false : true"
                    v-model="form.RecommendNunit"
                    placeholder="请选择"
                    @change="select_status"
                    size="small"
                  >
                    <el-option
                      :label="item.Organizename"
                      :value="item.Organizeid"
                      v-for="item in selectDepList"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td>
                <el-form-item label="出生年月" prop="RecommendBirthDate" style="height:25px">
                  <el-date-picker
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendBirthDate"
                    lass="date_picker"
                    type="datetime"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    placeholder=" 出生年月"
                  />
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="RecommendNation" label="民族" style="height:25px">
                  <el-input
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendNation"
                  ></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="RecommendNativePlace" label="籍贯" style="height:25px">
                  <el-input
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendNativePlace"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td>
                <el-form-item label="预计报道时间" prop="ReportingTime" style="height:25px">
                  <el-date-picker
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.ReportingTime"
                    class="date_picker"
                    type="datetime"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    placeholder=" 预计报道时间"
                  />
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="RecommendTell" label="联系电话" style="height:25px">
                  <el-input
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendTell"
                  ></el-input>
                </el-form-item>
              </td>
              <td>
                <el-form-item prop="RecommendAddress" label="家庭住址" style="height:25px">
                  <el-input
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendAddress"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item prop="RecommendIDcard" label="身份证号码" style="height:25px">
                  <el-input
                    :disabled="StepSN == 0 ? false : true"
                    size="small"
                    v-model="form.RecommendIDcard"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>

            <el-dialog
              v-if="dialogFormVisible"
              :visible.sync="dialogFormVisible"
              :title="人员资料"
              customClass="customWidth"
              width="90%"
            >
              <el-form :model="name" label-width="80px" label-position="left">
                <v-AccountOpen
                  :ParmType="ParmType"
                  @FunAccountAdd="FunAccountAdd"
                ></v-AccountOpen>
              </el-form>
            </el-dialog>
          </table>
        </el-form>
      </el-main>

      <el-main style="margin: 1px 10px">
        <span class="blueColor" style="padding: 10px"
          >工作流：</span
        >

        <el-timeline :reverse="true" ref="ListLog" :model="ListLog" style="margin: 10px">
          <el-timeline-item
            v-for="(activity, index) in ListLog"
            :key="index"
            :timestamp="activity.CreateDateTime"
          >
            {{ activity.Remark }}
          </el-timeline-item>
        </el-timeline>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import path from "path";
import { deepClone } from "@/utils";

import { updateForm, DeleteForm } from "@/api/RecommendCostRecordForm";
import elementIcons from "../icons/element-icons";
import vAccountOpen from "../Common/AccountOpen";

export default {
  components: {
    vAccountOpen,
  },

  props: {
    inputName: String,
    required: true,
  },
  data() {
    return {
      activeName: "first",
      form: [],
      ListLog: [],
      active: 0,
      StepSN: -1,
      selectlist: [],
      selectDepList: [],
      ParmType: "",
      multipleTable: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      where: "",
      rules: {
        UserName: [
          { required: true, message: "请输入推荐人称", trigger: "blur" },
        ],
        RecommendUserName: [
          { required: true, message: "请输入被推荐人名称", trigger: "blur" },
        ],
        RecommendSex: [
          { required: true, message: "请输入性别", trigger: "blur" },
        ],
        RecommendNunit: [
          { required: true, message: "请输入应聘单位", trigger: "blur" },
        ],
        RecommendNation: [
          { required: true, message: "请输入民族", trigger: "blur" },
        ],
        ReportingTime: [{ required: true, message: "请输入", trigger: "blur" }],
        RecommendTell: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        RecommendAddress: [
          { required: true, message: "请输入家庭住址", trigger: "blur" },
        ],
        RecommendIDcard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            min: 9,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
      reverse: true,
    };
  },
  created: function () {
    this.DataListData();
  },
  methods: {
    async DataListData() {
      // 提交数据，需要修改

      if (this.inputName == null) {
        this.inputName = this.$route.query.billID;
      }

      const result = await updateForm({
        billID: this.inputName,
        IsPostBack: false,
      });

      this.form = result.data1.Table[0];
      this.selectlist = result.data3.Table;
      this.selectDepList = result.data4.Table;
      this.ListLog = result.ListLog;

      this.StepSN = result.StepSN;

      if (result.code === 20000) {
      } else {
        this.$notify({
          title: "error",

          message: result.message,
          type: "error",
        });
      }

      // this.$notify({
      // title: '审核记录',
      // dangerouslyUseHTMLString: true,
      // message: this.ListLog,
      // position: 'bottom-right',
      // duration:0
      // });
    },
    async confirmData(submit) {
      // 提交数据，需要修改

      const Fresult = true;
      if (submit == 1) {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            this.$notify({
              title: "不能提交",
              dangerouslyUseHTMLString: true,
              message: "不可为空，不能提交",
              type: "error",
            });
            Fresult = false;
            return false;
          }
        });
      }

      if (Fresult) {
        const result = await updateForm({
          BillDate: JSON.stringify(this.form),
          billID: this.form.RecommendCostRecordNo,
          IsPostBack: true,
          submit: submit,
        });
        this.form = result.data1.Table[0];

        if (result.code === 20000) {
          //const { description, key, name } = this.EditObj

          this.ListLog = result.ListLog;

          this.StepSN = result.StepSN;

          this.dialogVisible = false;
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
         
          this.roles = [];
        } else {
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      }
    },
    //editUserInfo(index) {
    //  this.isEditObj[index].a = false;
    //}
    //checkEditUserInfo(index) {      //编辑用户信息
    //  this.isEditObj[index].a = true;
    //},
    //cancelEditUserInfo(index) {
    //  this.isEditObj[index].a = true;
    //}

    // 删除方法
    // 删除选中行

    select_status(val) {
      this.$forceUpdate();
    },
    open(type) {
      this.ParmType = type; //传入参数
      this.dialogFormVisible = true;
    },
    FunAccountAdd: function (Rows, ParmType) {
      //添加部门

      this.multipleTable = Rows[0];

      if (ParmType == 1) {
        this.form.UserCode = this.multipleTable.Account;
        this.form.UserName = this.multipleTable.Name;
        this.form.Organizeid = this.multipleTable.OrganizeID;
        this.form.Organizename = this.multipleTable.OrganizeName;
        this.form.JobName = this.multipleTable.JobName;
        this.form.Address = this.multipleTable.Address;
      } else if (ParmType == 2) {
        this.form.RecommendUserCode = this.multipleTable.Account;
        this.form.RecommendUserName = this.multipleTable.Name;
        this.form.RecommendNunit = this.multipleTable.OrganizeID;
        this.form.RecommendNunitName = this.multipleTable.OrganizeName;

        this.form.RecommendBirthDate = this.multipleTable.Birthday;
        this.form.RecommendAddress = this.multipleTable.Address;
        this.form.RecommendNation = this.multipleTable.NationName;
        this.form.RecommendNativePlace = this.multipleTable.NativePlace;
        this.form.ReportingTime = this.multipleTable.EntryDate;
        this.form.RecommendTell = this.multipleTable.Tel;
        this.form.RecommendIDcard = this.multipleTable.CardID;
        this.form.RecommendSex = this.multipleTable.Sex;
      }

      this.dialogFormVisible = false;
    },
  },
};
</script>


<style scoped>
/* .formStyle /deep/ .el-form-item {
  float: left;
  width: 33%;
  margin-right: 0;
  margin-bottom: 10px;
}
.formStyle /deep/ .el-form-label {
  word-wrap: break-word;
  word-break: normal;
}
.outForm /deep/ .el-form-item__content {
  width: 100%;
}
.innerForm /deep/ .el-form-item__content {
  width: auto;
}

.formStyle /deep/ .el-select {
  width: 100%;
}
.formStyle /deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
} */
.infoColor {
  font-weight: bold;
  color: #909399;
}
.redColor {
  font-weight: bold;
  color: red;
}
.blueColor {
  font-weight: bold;
  color: #409eff;
}
.orangeColor {
  font-weight: bold;
  color: orange;
}
.greenColor {
  font-weight: bold;
  color: #67c23a;
}
.svg-icon[data-v-c8a70580] {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-bottom: -15px;
}
.el-form-item {
  margin-bottom: 10px;
}
.el-form-item__label {
  width: 100px;
}
.customWidth {
  width: 80%;

}
</style>


